<template>
  <div class="config" style="margin: 20px auto;width: 80%;">
    <div class="config-check">
      <Row>
        <i-col span="5">
          <Select v-model="baseUrl" filterable @on-change="urlChange" size="large">
            <Option v-for="item in urlOptions" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </i-col>
        <i-col span="5">
          <Cascader :data="jsonOptions" v-model="jsonList" size="large" placeholder="请选择文件列表" @on-change="jsonNameChange"></Cascader>
        </i-col>
        <i-col span="4">
          <Button type="primary" long @click="submitData" size="large">修改当前配置文件</Button>
        </i-col>
        <i-col span="4">
          <Button type="primary" long @click="back" size="large">回退选择版本</Button>
        </i-col>
      </Row>
      <Row>
        <i-col span="10">
          <Select filterable size="large" v-model="allChangeUrl">
            <Option v-for="item in allChangeOptions" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </i-col>
        <i-col span="4">
          <Button long @click="allChangeJsonData" size="large">修改所有配置文件</Button>
        </i-col>
      </Row>
    </div>

    <div class="config-change">
      <i-input type="textarea" placeholder="请填写资料内容" v-model="jsonData" :autosize="{minRow: 10}"></i-input>
    </div>

  </div>
</template>
<script>
  import ajax from '../../../utils/ajax/index'

  export default {
    data () {
      return {
        urlOptions: global.threeinoneBack.urlOptions, // 负载服务器列表
        allChangeOptions: global.threeinoneBack.allChangeOptions, // 同步修改所有ip
        allChangeUrl: null, // 全部修改配置的url 目标
        jsonOptions: [], // 文件列表
        jsonData: null, // 当前文件内容
        baseUrl: null, // 当前服务器地址
        jsonList: [] // 文件信息
      }
    },
    mounted () {
    },
    methods: {
      urlChange (val) { // 切换服务器
        this.jsonList = [] // 清空级联
        this.jsonData = null // 清空内容
        ajax.get(`${val}${this.api.config.getMenu}`, {}).then((res) => {
          console.log(res)
          if (res.msg.code === '20000') {
            this.jsonOptions = res.data
          }
        })
      },
      jsonNameChange (val) { // 文件列表变化
        let appId = val[0]
        let jsonName = val[1]
        ajax.get(`${this.baseUrl}${this.api.config.getJsonData}`, { appId: appId, jsonName: jsonName }).then((res) => {
          console.log(res)
          if (res.msg.code === '20000') {
            this.jsonData = res.data
          } else {
            this.jsonData = ''
          }
        })
      },
      submitData () { // 修改文件内容
        let that = this
        that.$Modal.confirm({
          content: '确认提交?',
          onOk: () => {
            let params = {appId: that.jsonList[0], jsonName: that.jsonList[1], content: that.jsonData}
            ajax.post(`${that.baseUrl}${this.api.config.changeJsonData}`, params).then((res) => {
              if (res.msg.code === '20000') {
                that.$Message.success('成功')
              } else {
                that.$Message.error(res.msg.message)
              }
            })
          }
        })
      },
      back () {
        let that = this
        that.$Modal.confirm({
          content: '确认回退？',
          onOk: () => {
            ajax.get(`${that.baseUrl}${this.api.config.back}`, {appId: that.jsonList[0], jsonName: that.jsonList[1]}).then((res) => {
              if (res.msg.code === '20000') {
                that.$Message.success('成功')
              } else {
                that.$Message.error(res.msg.message)
              }
            })
          }
        })
      },
      allChangeJsonData () {
        let that = this

        if (that.jsonList.length === 0) {
          that.$Message.error(`请问选择配置的文件信息`)
          return false
        }

        if (that.allChangeUrl === '' || that.allChangeUrl === null) {
          that.$Message.error(`请选择目标url`)
          return false
        }

        that.$Modal.confirm({
          content: '确认提交?',
          onOk: () => {
            let params = {appId: that.jsonList[0], jsonName: that.jsonList[1], content: that.jsonData}
            ajax.post(`${this.allChangeUrl}${this.api.config.allChangeJson}`, params).then((res) => {
              if (res.msg.code === '20000') {
                that.$Message.success('成功')
              } else {
                that.$Message.error(res.msg.message)
              }
            })
          }
        })
      }
    }
  }
</script>
